<template>
  <view class="timeline-container">
    <text class="section-title text-center">
      <text class="title-icon">◈</text>
      物理发展历程
    </text>
    
    <view class="timeline">
      <view 
        v-for="(event, index) in timelineEvents" 
        :key="index" 
        class="timeline-item"
      >
        <view class="timeline-badge">
          <text class="year">{{ event.year }}</text>
        </view>
        <view class="timeline-content">
          <uni-card
            :cover="url('nav', event.image, 'png')"
            :title="event.title"
            @click="openImagePreview(event.image)"
            class="timeline-card"
          >
            <text class="card-text">{{ event.description }}</text>
            <view class="timeline-tags mt-2">
              <uni-tag 
                v-for="tag in event.tags" 
                :key="tag"
                :text="tag"
                type="error"
                size="small"
                class="me-1"
              />
            </view>
          </uni-card>
        </view>
      </view>
    </view>

    <!-- 图片预览弹窗 -->
    <uni-popup ref="previewPopup" type="center" background-color="rgba(0, 0, 0, 0.7)">
      <view class="image-preview" @tap="closePreview">
        <image 
            :src="url('nav', currentPreviewImage, 'png')" 
          mode="aspectFit"
          class="preview-image animate__animated animate__zoomIn"
        />
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const url = $url

// 时间线数据
const timelineEvents = ref([
  {
    year: '古代',
    title: '物理智慧萌芽',
    description: '古代中国在物理领域有着丰富的实践经验和理论探索。墨子对光学、力学的研究，沈括对磁学、声学的观察，都体现了古代中国物理学的智慧。这些成就为后世物理学发展奠定了基础。',
    image: '0',
    tags: ['光学', '力学', '磁学'],
    isActive: false
  },
  {
    year: '近代',
    title: '物理理论突破',
    description: '近代物理学迎来了重大突破。牛顿力学体系的建立，电磁学的发展，热力学的形成，都为现代物理学奠定了基础。这一时期，物理学开始从经验科学向理论科学转变。',
    image: '1',
    tags: ['力学', '电磁学', '热力学'],
    isActive: false
  },
  {
    year: '现代',
    title: '量子与相对论',
    description: '20世纪初，量子力学和相对论的诞生彻底改变了人们对物理世界的认识。爱因斯坦、玻尔等科学家的贡献，使物理学进入了一个全新的时代。这一时期，物理学在微观和宏观两个尺度上都取得了重大突破。',
    image: '2',
    tags: ['量子力学', '相对论', '现代物理'],
    isActive: false
  },
  {
    year: '当代',
    title: '物理前沿探索',
    description: '当代物理学继续向更深层次探索。粒子物理、凝聚态物理、天体物理等领域都取得了重大进展。量子计算、暗物质研究、引力波探测等前沿课题正在推动物理学的发展。',
    image: '3',
    tags: ['粒子物理', '量子计算', '天体物理'],
    isActive: false
  },
  {
    year: '未来',
    title: '物理发展展望',
    description: '未来物理学将继续探索宇宙的奥秘。统一场论、量子引力、暗能量等重大课题的研究，将推动物理学向更深层次发展。同时，物理学与其他学科的交叉融合也将带来新的突破。',
    image: '4',
    tags: ['统一场论', '量子引力', '交叉学科'],
    isActive: false
  }
])

// 图片预览相关状态
const currentPreviewImage = ref('')
const previewPopup = ref(null)

// 打开图片预览
const openImagePreview = (image) => {
  currentPreviewImage.value = image
  previewPopup.value.open()
}

const closePreview = () => {
  previewPopup.value.close()
}
</script>

<style lang="scss" scoped>
.timeline-container {
  padding: 40rpx;
  background: #f8f8f8;
  min-height: 100vh;
}


.timeline {
  position: relative;
  padding: 40rpx 0;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4rpx;
    height: 100%;
    background: var(--td-brand-color-8);
    opacity: 0.3;
  }
}

.timeline-item {
  position: relative;
  margin-bottom: 80rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  &:nth-child(odd) {
    .timeline-content {
      margin-left: 60rpx;
      
      &::before {
        left: -30rpx;
        border-width: 15rpx 30rpx 15rpx 0;
        border-color: transparent #fff transparent transparent;
      }
    }
  }
  
  &:nth-child(even) {
    flex-direction: row-reverse;
    
    .timeline-content {
      margin-right: 60rpx;
      
      &::before {
        right: -30rpx;
        border-width: 15rpx 0 15rpx 30rpx;
        border-color: transparent transparent transparent #fff;
      }
    }
  }
}

.timeline-badge {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: #fff;
  border: 4rpx solid var(--td-brand-color);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  
  .year {
    font-size: 24rpx;
    font-weight: bold;
    color: var(--td-brand-color);
  }

}

.timeline-content {
  width: calc(50% - 40rpx);
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 20rpx;
    width: 0;
    height: 0;
    border-style: solid;
  }
}

.timeline-card {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-6rpx);
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.12);
  }
  
  .card-text {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    margin: 20rpx 0;
    display: block;
  }
}

.timeline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.image-preview {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .preview-image {
    max-width: 90%;
    max-height: 90%;
    border-radius: 12rpx;
  }
}

// 移动端适配
@media screen and (max-width: 768px) {
  .timeline {
    &::before {
      left: 40rpx;
    }
  }
  
  .timeline-item {
    flex-direction: row !important;
    
    &:nth-child(odd),
    &:nth-child(even) {
      .timeline-content {
        width: calc(100% - 100rpx);
        margin-left: 100rpx !important;
        margin-right: 20rpx !important;
        
        &::before {
          left: -30rpx !important;
          right: auto !important;
          border-width: 15rpx 30rpx 15rpx 0 !important;
          border-color: transparent #fff transparent transparent !important;
        }
      }
    }
  }
  
  .timeline-badge {
    left: 40rpx;
    transform: translateX(-50%);
  }
}
</style> 